<template>
	<view class="">
		<view class=" jui_pad_2432 jui_bg_fff jui_flex jui_flex_justify_between jui_flex_items_center"
			@tap="jump(`/pages/user/address/addressList?from=confirmOrder`)">
			<view class="add-address-box flex-sub x-f" v-if="!addressId" style="padding: 30rpx 20rpx;">
				<image class="address-bg" src="/static/imgs/user/address.png" mode=""
					style="height: 30rpx;width: 30rpx;"></image>
				<view class="box-bg x-bc flex-sub pad">
					<text class="select-notice">请选择收货地址</text>
				</view>
			</view>
			<view class="" v-else style="width: 100%;padding: 20rpx 10rpx;">
				<view class="jui_flex jui_flex_items_center">
					<image src="/static/imgs/user/address.png" mode="" style="height: 30rpx;width: 30rpx;"></image>
					<view class="jui_fs26 jui_mar_l16 jui_font_w400">{{address.district}}</view>
				</view>
				<view class="jui_fs29 jui_mar_t20 jui_font_w500" style="width: 90%;">
					{{address.district}}{{address.address}}
				</view>
				<view class="jui_fs28 jui_mar_t12 jui_font_w500">
					{{address.name}} {{address.mobile}}
				</view>
			</view>
			<image src="../../../static/imgs/home/right.png" style="width: 18rpx;height: 26rpx;" mode=""></image>
		</view>
		<view class="row" style='display: flex; align-items: center;margin: 20rpx 0;background: #fff;'>
			<view class="nominal jui_fs30" style="margin:0 40rpx;">
				付款方式
			</view>
			<view class="input">
				<radio-group @change="radioChange">
					<label v-for="(item, index) in listP" :key="item.value" style="margin-right:20rpx;">
						<radio style="transform:scale(0.6)" :value="item.value" :checked="index === currentP" />
						{{item.name}}
					</label>
				</radio-group>
			</view>
		</view>
		<!-- <view class="jui_h20">

		</view> -->
		<view class=" " v-for="(item, index) in list" :key="index" style="background-color: #fff;">
			<view class="jui_flex jui_flex_items_center jui_pad_b20" style="justify-content:space-around">
				<image :src="item.photo" mode="aspectFit" style="width: 160rpx;height: 160rpx;"></image>
				<view class="jui_flex_col jui_flex_justify_between" style="width: 70%;margin-left: 3%;height:160rpx;">
					<view class="">
						<view class="jui_fc_333 jui_font_w600 jui_ellipsis_1">{{item.goodsName}}</view>
						<!-- <view class="jui_fc_999 jui_fs26 jui_mar_t16"> {{item.format_name}} </view> -->
					</view>
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center">
						<view class=""> ¥ {{ item.ismember ? item.memberPrice : item.marketPrice}} </view>
						<view class="jui_fs26"> x {{item.number}} </view>
					</view>
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center">
						<view class="price_hy" style='display: flex;'>
							<view class="icon-money">￥</view>
							<view>{{ item.ismember ? item.ydysmemberPrice : item.ydysmarketPrice}}</view>
						</view>
						<view class="jui_fs26 price_hy"> x {{item.number}} </view>
					</view>
				</view>
			</view>
			<view class="jui_flex jui_flex_justify_between jui_flex_items_center  jui_pad_t20 jui_pad_b20"
				style="border-bottom: 1px solid #F5F5F5;">
				<view class="jui_fc_333 jui_fs29 text-right" style="width: 25%; text-align: center;"> 购买数量 </view>
				<view class="jui_flex jui_flex_justify_between jui_flex_items_center">
					<image src="/static/imgs/home/-.png" style="height: 24rpx;width: 24rpx;" mode=""
						@tap="jia(item, -1)"></image>
					<input type="text" :value="item.number"
						style="width: 60rpx;height: 20rpx;text-align: center;background-color: #F6F6F6;margin: 0 10rpx;font-size: 24rpx;"
						onchange="change" disabled="true" />
					<image src="/static/imgs/home/jia.png" mode="" style="height: 24rpx;width: 24rpx;"
						@tap="jia(item, 1)"></image>
				</view>
			</view>
			<!-- <view class="jui_flex jui_flex_justify_between jui_flex_items_center  jui_pad_t20 " >
				<view class="jui_fc_333 jui_fs29 text-right" style="width: 25%;"> 运费 </view>
				<view class=""> ￥{{item.freight}} </view>
			</view> -->
		</view>
		<view class="jui_h20">

		</view>
		<view style="display: flex; width: 100%; align-items: center;">
			<view>
				<text class="jui_fs28 jui_fc_000">总计：</text>
			</view>
			<view>
				<view>
					<text id="AllTotal " class="jui_fs30">￥{{allPrice}}</text>
				</view>
				<view style="display: flex; align-items: center;">
					<view class="icon-money price_hy">￥</view>
					<view id="AllTotal " class="jui_fs30 price_hy">{{allPriceHb}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="text-right jui_mar_r20 jui_pad_r20">
			<text>小计￥</text>
			<text class="jui_fc_fuse">{{(allPrice*discount/10).toFixed(2)}}</text>
		</view> -->
		<view class="jui_h20"></view>
		<view class="add">
			<view class="btn" @tap="submit()">
				立即购买
			</view>
		</view>
		<!-- 输入支付密码 -->
		<payPassword v-if="flag" @doSubmit="doSubmit" @hide="hide"></payPassword>
		<!-- 输入支付密码end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from: '',
				num: 1,
				shop_id: '',
				categoryId: '',
				id_str: '',
				address: {},
				addressId: '',
				list: [],
				flag: false,
				password: [],
				discount: 0,
				allNum: '',
				cart_photoes: [],
				cart_numbers: [],
				listP: [{
						value: 'cny',
						name: 'CNY钱包'
					},
					{
						value: 'wallet',
						name: 'BLTZ钱包'
					},
				],
				currentP: 0,
				paytype: 'cny',
			}
		},
		computed: {
			allPrice() {
				var totalPrice = 0;
				let memberPrice = 0;
				let marketPrice = 0;
				this.list.forEach((item, index) => {
					if (item.memberPrice && item.ismember) {
						memberPrice += item.memberPrice * item.number
					}
					if (item.marketPrice && !item.ismember) {
						marketPrice += item.marketPrice * item.number
					}
					if (memberPrice) {
						totalPrice = memberPrice
					}
					if (marketPrice) {
						totalPrice = marketPrice
					}
					if (memberPrice && marketPrice) {
						totalPrice = memberPrice + marketPrice
					}
				})
				return Number(totalPrice).toFixed(1)
			},
			allPriceHb() {
				var allPriceHb = 0;
				let ydysmemberPrice = 0;
				let ydysmarketPrice = 0;
				this.list.forEach((item, index) => {
					this.allNum = item.number
					if (item.ydysmemberPrice && item.ismember) {
						ydysmemberPrice += item.ydysmemberPrice * item.number
					}
					if (item.ydysmarketPrice && !item.ismember) {
						ydysmarketPrice += item.ydysmarketPrice * item.number
					}
					if (ydysmemberPrice) {
						allPriceHb = ydysmemberPrice
					}
					if (ydysmarketPrice) {
						allPriceHb = ydysmarketPrice
					}
					if (ydysmemberPrice && ydysmarketPrice) {
						allPriceHb = ydysmemberPrice + ydysmarketPrice
					}

				})
				return Number(allPriceHb).toFixed(2)
			},
		},
		onLoad(opt) {
			this.from = opt.from;
			this.shop_id = opt.shop_id;
			this.num = Number(opt.num);
			this.photo = opt.photo;
			this.categoryId = opt.categoryId;
			this.id_str = opt.id_str;
			this.cart_photoes = opt.photoes;
			this.cart_numbers = opt.numbers;
			this.init();
		},
		methods: {
			radioChange: function(evt) {
				this.paytype = evt.detail.value
				for (let i = 0; i < this.listP.length; i++) {
					if (this.listP[i].value === evt.detail.value) {
						this.currentP = i;
						break;
					}
				}
			},
			init() {
				this.$api.getDefaultSite().then(res => {
					if (res.ok&&res.data.length>0) {
						//默认第一个地址为收货地址
						this.address = res.data[0].district;
						this.addressId = res.data[0].id;
						this.address = res.data[0];
					}
				});
				this.$api.my().then(res => {
					if (res.code == 1) {
						this.discount = Number(res.data.shops.discount);
					}
				});
				if (this.from == "buy") {
					let userId = uni.getStorageSync('uid');
					let _token = uni.getStorageSync('token');
					let data = {
						userId: userId,
						_token:_token,
						goodsId: this.shop_id,
						categoryId: this.categoryId,
						number: this.num,
						photo: this.photo,
						type: 'single'
					}
					this.$api.getOrderShop(data).then(res => {
						if (res.ok) {
							this.list = res.data.storages
						} else {
							this.$msg(msg);
						}
					});
				} else if (this.from == "cart") {
					let userId = uni.getStorageSync('uid');
						let _token = uni.getStorageSync('token');
					let data = {
						userId: userId,
						_token:_token,
						goodsId: this.id_str,
						number: this.cart_numbers,
						photo: this.cart_photoes,
						type: 'mutil'
					}
					this.$api.getOrderShopCar(JSON.parse(JSON.stringify(data))).then(res => {
						if (res.ok) {
							this.list = res.data.storages
						} else {
							this.$msg(msg);
						}
					});

				}
			},
			jia(item, num) {
				if (num > 0) {
					item.number += num;
				} else {
					if (num > 1) {
						item.number += num;
					} else {
						if (num < 0) {
							num = item.number--
							if (num < 1) {
								item.number = 0
								return;
							}
						}
					}
				}
				if (this.from == "cart") {
					let data = {
						type: 1,
						id: item.id
					}
					data.type = num > 0 ? 1 : 2;
					this.$api.updateShopCarNum(data).then(res => {
						if (res.code == 1) {}
					});
				}
			},
			submit() {
				if (!this.addressId) {
					this.$msg('请选择收货地址');
					return false
				}
				this.flag = true;
			},
			doSubmit(data) {
				if (!this.addressId) {
					return this.$msg("请选择收货地址");
				}
				this.password = data;
				if (this.from == "buy") {
					this.$api.checkPayPwd({
						paypass: this.password.toString()
					}).then(res => {
						if (res.ok) {
							let _token = uni.getStorageSync('token');
							let userId = uni.getStorageSync('uid');
							let data = {
								userId:userId,
								_token:_token,
								goodsId: this.shop_id,
								addressId: this.addressId,
								paytype: this.paytype,
								number: this.allNum,
								pwd: this.password.toString()
							}
							//判断商品是什么类型，如果是报单产品则更新会员激活标识
							this.$api.shopPay(data).then(res => {
								if (res.ok) {
									if(this.categoryId=='A1201'&&!uni.getStorageSync('effective')){
										uni.setStorageSync('effective', 1);
									}
									this.$msg(res.msg);
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/user/order/orderList`
										})
									}, 1500)
								}else{
									this.$msg(res.msg);
									this.hide()
								}
							});
						} else {
							this.$msg(res.msg);
						}
					});

				} else if (this.from == "cart") {
					this.$api.checkPayPwd({
						paypass: this.password.toString()
					}).then(res => {
						if(res.ok){
							let _token = uni.getStorageSync('token');
							let userId = uni.getStorageSync('uid');
							let dataList = this.list.map(item=>{
								return(
								Object.assign({},{
									userId:userId,
									_token:_token,
									goodsId:item.goodsId,
									number:item.number,
									addressId: this.addressId,
									paytype: this.paytype,
								})
								)
							})
							let params = {'orders':JSON.stringify(dataList)}
							this.$api.shopCarBuy(params).then(res => {
								if (res.ok) {
									this.$msg(res.msg);
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/user/order/orderList`
										})
									}, 1500)
								}else{
									this.$msg(res.msg);
								}
							});
						}else{
							this.$msg(res.msg)
						}
					})
					
				}
			},
			hide(data) {
				this.password = data;
				this.flag = false;
			}

		}
	}
</script>

<style lang="scss">
	.bor {
		border-bottom: 1px solid #f8f8f8;
	}
    .icon-money{
		width: 15px;
		    border: 1px solid;
		    border-radius: 100%;
		    height: 15px;
		    /* line-height: 12px; */
		    text-align: center;
		    font-size: 12px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
	}
	.uni-list {
		width: 100%;
	}

	.price_hy {
		color: #00c2ff;
	}

	.uni-list-cell {
		display: flex;
		/* margin-bottom: 20rpx; */
		border-bottom: 1px solid #F3F3F3;
		align-items: center;
	}

	.add {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		justify-content: center;
		align-items: center;

		.btn {
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
			width: 90%;
			margin: 0 auto;
			height: 80upx;
			border-radius: 80upx;
			background-color: $fuse;
			color: #fff;
			justify-content: center;
			align-items: center;
			text-align: center;
			line-height: 80rpx;

			.icon {
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}

			font-size: 30upx;
		}
	}
</style>
